<template>
  <div class="h100 commonTableSty statisticsEcuTableBox" ref="statisticsEcuTableBox">
    <a-table
      :columns="columns"
      :data-source="tbData"
      :pagination="false"
      :loading="loadingPageData"
      :scroll="{ y: scrollDomMaxScrollHeight }"
      row-key="id"
    >
      <template slot-scope="text" v-for="column in commonColumns" :slot="column.scopedSlots.customRender">
        <table-ellipsis :text="text" :key="column.dataIndex"></table-ellipsis>
      </template>
      <!-- 关联版本 -->
      <template
        slot="versionList"
        slot-scope="text,record"
      >
        <a
          @click="doAction('relatedVersion',record)"
          v-if="Array.isArray(record.versionIds)&&record.versionIds.length"
        >
          <i class="iconfont icon-banben"></i>
          <span style="font-weight:bolder"> {{ record.versionIds.length }}</span>
        </a>
        <div v-else>
          <i class="iconfont icon-banben"></i>
          <span> 0</span>
        </div>
      </template>
      <!-- 关联车型 -->
      <template
        slot="modelList"
        slot-scope="text,record"
      >
        <a
          @click="doAction('relatedModel',record)"
          v-if="Array.isArray(record.modelIds)&&record.modelIds.length"
        >
          <i class="iconfont icon-chexing"></i>
          <span style="font-weight:bolder"> {{ record.modelIds.length }}</span>
        </a>
        <div v-else>
          <i class="iconfont icon-chexing"></i>
          <span>0</span>
        </div>
      </template>
      <template
        slot="createTime"
        slot-scope="text"
      >
        <table-ellipsis :text="text|moment('YYYY-MM-DD HH:mm:ss')"></table-ellipsis>
      </template>
    </a-table></div>
</template>
<script>
import { mixinScrollLoadData } from '@/utils/mixin'
import { statisticsEcuTbColumns } from '../config/list'
import tableEllipsis from '@/components/Ellipsis/TableEllipsis'
import ecuApi from '@/api/modules/system/ecuMana'
import moment from 'moment'
import { mapState } from 'vuex'
export default {
  components: {
    tableEllipsis
  },
  mixins: [mixinScrollLoadData],
  computed: {
    ...mapState({
      queryParams: (state) => state.statisticsEcu.queryParams
    }),
    commonColumns () {
      return this.columns.filter(item => !item.special)
    }
  },
  data () {
    return {
      tbData: [],
      pageSize: 15,
      scrollDomRef: 'statisticsEcuTableBox',
      columns: statisticsEcuTbColumns,
      totalPage: 0,
      totalData: 0
    }
  },
  watch: {
  },
  created () {
    this.loadPageData()
  },
  mounted () {
  },
  methods: {
    loadPageData () {
      return new Promise((resolve, reject) => {
        this.loadingPageData = true
        ecuApi.getEcuList({ ...this.queryParams, pageSize: this.pageSize, pageNo: this.pageCount }).then(res => {
          let { data } = res
          if (this.pageCount > 1) {
            data = this.tbData.concat(data)
          }
          this.tbData = data
          this.totalPage = res.totalPage
          this.totalData = res.totalCount
          resolve(true)
        }).catch(err => {
          reject(err)
        }).finally(() => {
          this.loadingPageData = false
        })
      })
    },
    getDateTime (datetime) {
      return moment(datetime).format('YYYY-MM-DD HH:mm:ss')
    },
    doAction (key, rowData) {
      if (this[key]) {
        this[key](rowData)
        return
      }
      this.$emit('clickbtn', { type: key, data: rowData })
    }
  }
}
</script>

<style lang="less" scoped>
.statisticsEcuTableBox {
}
</style>
